<template>
  <div class="user">
    <div class="user-left">
      <div class="user-left-top"></div>
      <div class="user-left-main">
        <div
          class="user-left-list"
          v-for="item in userLeftList"
          :key="item.id"
          :class="[defaultId === item.id ? 'user-left-active' : '']"
          @click="showPage(item.id)"
        >
          <div class="slot flex-center">
            <!-- 圆圈图标 -->
            <div class="circle"></div>
            <!-- 标签组名 -->
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="user-right">
      <div class="user-right-main">
        <div v-show="defaultId === 1" class="flex-center-start">
          <el-button
            v-show="defaultId === 1"
            class="user-button-primary"
            type="primary"
            @click="createUser"
            icon="el-icon-plus"
            size="mini"
            >新增用户</el-button
          >
          <el-select
            v-model="groupId"
            placeholder="请选择用户组"
            clearable
            style="margin: 0 0.2rem; width: 3rem"
            size="mini"
            class="search-con"
          >
            <el-option
              v-for="item in userGroupData"
              :label="item.groupName"
              :key="item.groupId"
              :value="item.groupId"
            />
          </el-select>
          <el-input
            placeholder="请输入用户名"
            v-model="searchName"
            clearable
            style="margin-right: 0.2rem; width: 3rem"
            @keyup.enter.native="searchUser"
            size="mini"
            class="search-con"
          />
          <el-button
            type="primary"
            @click="searchUser"
            icon="el-icon-search"
            size="mini"
            >搜索</el-button
          >
        </div>
        <el-table
          class="user-right-table"
          :header-cell-style="tableHeaderStyle"
          :row-style="tableRowStyle"
          ref="userRightTable"
          :data="userTableData"
          tooltip-effect="dark"
          v-show="defaultId === 1"
          v-loading="userLoading"
          element-loading-text="正在加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column type="index" align="left" width="50" />
          <el-table-column
            label="用户ID"
            prop="userId"
            align="center"
            width="100"
          />
          <el-table-column label="用户名" prop="loginName" align="center" />
          <el-table-column label="用户角色" align="center">
            <template #default="scope">
              <span>{{ getUserRoleName(scope.row.userRole) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="组内角色" align="center" width="150">
            <template #default="scope">
              <span>{{ getUserRoleType(scope.row.roleType) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所属用户组"
            prop="groupName"
            align="center"
            width="200"
          />
          <el-table-column label="创建时间" prop="createTime" align="center" />
          <!-- <el-table-column label="最后更新时间" prop="updateTime" align="center" width="200" /> -->
          <el-table-column label="操作" align="right" width="300">
            <template #default="scope">
              <el-button
                size="mini"
                @click="handleUserAuth(scope.row)"
                v-if="scope.row.userRole == 3 && scope.row.roleType != 3"
                >细分权限</el-button
              >
              <el-button
                size="mini"
                @click="handleUserEdit(scope.row)"
                type="primary"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleUserDelete(scope.row.userId)"
                v-if="scope.row.userRole != 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button
          v-show="defaultId === 2"
          class="user-button-primary"
          type="primary"
          @click="createUserGroup"
          icon="el-icon-plus"
          size="mini"
          >新增用户组</el-button
        >
        <el-table
          class="user-right-table"
          :header-cell-style="tableHeaderStyle"
          :row-style="tableRowStyle"
          ref="userRightTable"
          :data="userGroupTableData"
          tooltip-effect="dark"
          v-show="defaultId === 2"
          v-loading="userGroupLoading"
          element-loading-text="正在加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column type="index" width="50" align="left" />
          <el-table-column
            label="用户组ID"
            prop="groupId"
            width="200"
            align="center"
          />
          <el-table-column label="用户组名" prop="groupName" align="center" />
          <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
            width="200"
          />
          <el-table-column
            label="最后更新时间"
            prop="updateTime"
            align="center"
            width="200"
          />
          <el-table-column label="操作" align="right" width="250">
            <template #default="scope">
              <el-button size="mini" @click="handleUserGroupView(scope.row)"
                >查看权限</el-button
              >
              <el-button
                size="mini"
                @click="handleUserGroupEdit(scope.row)"
                type="primary"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleUserGroupDelete(scope.row.groupId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="image-pagination">
          <el-pagination
            v-show="defaultId === 1"
            background
            small
            layout="prev, pager, next, total, jumper"
            :current-page="pageNo"
            :page-size="pageSize"
            :total="total"
            @current-change="handleUserCurrentChange"
          />
          <el-pagination
            v-show="defaultId === 2"
            background
            small
            layout="prev, pager, next, total, jumper"
            :current-page="pageNo"
            :page-size="pageSize"
            :total="total"
            @current-change="handleUserGroupCurrentChange"
          />
        </div>
        <!-- 新增用户组 -->
        <el-dialog
          title="新增用户组"
          :visible.sync="userGroupDialogVisible"
          :before-close="beforeUserGroupDialogClose"
        >
          <el-form :label-width="dialogLabelWidth" :model="userGroupForm">
            <el-form-item label="用户组名称：">
              <el-input
                v-model.trim="userGroupForm.groupName"
                :disabled="inputDisabled"
              />
            </el-form-item>
            <el-form-item label="用户组权限：">
              <el-tree
                class="target-tree"
                ref="targetTree"
                :data="targetTreeData"
                node-key="xh"
                show-checkbox
                :props="defaultProps"
                @check="treeCheck"
                :check-on-click-node="true"
                check-strictly
              >
                <span class="custom-tree-node" slot-scope="{ node }">
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </el-form-item>
          </el-form>
          <span slot="footer" v-if="!inputDisabled">
            <el-button @click="cancelUserGroup">取 消</el-button>
            <el-button type="primary" @click="submitUserGroup">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 新增用户 -->
        <el-dialog
          title="新增用户"
          :visible.sync="userDialogVisible"
          :before-close="beforeUserDialogClose"
        >
          <el-form :label-width="dialogLabelWidth" :model="userForm">
            <el-form-item label="用户名：">
              <el-input v-model.trim="userForm.loginName" />
            </el-form-item>
            <el-form-item label="登录密码：">
              <el-input type="password" v-model.trim="userForm.password" />
            </el-form-item>
            <el-form-item label="用户角色：" v-show="userForm.userRole != '1'">
              <el-radio-group v-model="userForm.userRole">
                <el-radio :label="'2'">普通用户</el-radio>
                <el-radio :label="'3'">专家用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="组内角色：" v-show="userForm.userRole == '3'">
              <el-radio-group v-model="userForm.roleType">
                <el-radio :label="'1'">普通专家</el-radio>
                <el-radio :label="'2'">专家小组长</el-radio>
                <el-radio :label="'3'">专家大组长</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="所属用户组："
              v-show="
                userForm.userRole == '3' &&
                (userForm.roleType == '1' || userForm.roleType == '2')
              "
            >
              <el-select v-model="userForm.groupId" placeholder="请选择">
                <el-option
                  v-for="item in userGroupData"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="cancelUser">取 消</el-button>
            <el-button type="primary" @click="submitUser">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 细分权限 -->
        <el-dialog
          title="细分权限"
          :visible.sync="userAuthDialogVisible"
          height="300"
          :before-close="beforeUserAuthDialogClose"
        >
          <el-form :label-width="dialogLabelWidth">
            <el-form-item label="用户名：">
              <el-input v-model.trim="loginName" disabled />
            </el-form-item>
            <el-form-item label="用户权限：">
              <el-tree
                class="target-tree"
                ref="authTree"
                :data="authTreeData"
                node-key="xh"
                show-checkbox
                default-expand-all
                :props="defaultProps"
                @check="authTreeCheck"
                :check-on-click-node="true"
                check-strictly
              >
                <span class="custom-tree-node" slot-scope="{ node }">
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="cancelUserAuth">取 消</el-button>
            <el-button type="primary" @click="submitUserAuth">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "userManagement",
  data() {
    return {
      userLeftList: [
        {
          id: 1,
          name: "用户管理",
        },
        {
          id: 2,
          name: "用户组管理",
        },
      ],
      // 分页用户组
      userGroupTableData: [],
      // 分页用户
      userTableData: [],
      total: 0,
      dialogLabelWidth: "1rem",
      userDialogVisible: false,
      userGroupDialogVisible: false,
      // 全部用户组
      userGroupData: [],
      userForm: {
        userId: 0,
        loginName: "",
        password: "",
        userRole: "2", // 1-admin，2-普通用户，3-专家用户
        roleType: "", // 1-普通专家，2-专家小组长，3-专家大组长
        groupId: "",
      },
      targetTreeData: [],
      userGroupForm: {
        groupId: "",
        groupName: "",
        targetIds: [],
      },
      defaultProps: {
        children: "childrenTarget",
        label: "mc",
      },
      // 搜索条件
      groupId: "",
      searchName: "",
      pageSize: 12,
      pageNo: 1,
      // 查看权限弹窗
      inputDisabled: false,
      // 细分权限弹窗
      userAuthDialogVisible: false,
      authTreeData: [],
      expertId: "",
      loginName: "",
      userAuth: [],
      userLoading: false, // user Table
      userGroupLoading: false, // userGroup Table
    };
  },
  inject: ["reload"],
  created() {
    if (this.user.userRole != 1) {
      this.$router.push("/");
      return;
    }
    // 获取目标树数据
    this.findAllTarget();
    // 获取用户组全部数据
    this.getAllUserGroup0();
    if (this.defaultId == 1) {
      // 获取用户数据
      this.getAllUser();
    } else {
      // 获取用户组分页数据
      this.getAllUserGroup();
    }
  },
  watch: {
    defaultId(val) {
      this.pageNo = 1;
      if (val == 1) {
        this.getAllUser();
      } else {
        this.getAllUserGroup();
      }
    },
  },
  computed: {
    ...mapState({
      user(state) {
        return state.user;
      },
      defaultId(state) {
        return state.app.defaultId;
      },
    }),
  },
  methods: {
    // 表头行样式
    tableHeaderStyle() {
      return "height:0.3rem;background-color:#034576 !important;color:#fff;font-size:0.14rem;text-align:center;";
    },
    // 表格内容样式
    tableRowStyle() {
      return "";
    },
    getUserRoleName(userRole) {
      if (userRole == 1) {
        return "超级管理员";
      } else if (userRole == 2) {
        return "普通用户";
      } else if (userRole == 3) {
        return "专家用户";
      }
    },
    getUserRoleType(roleType) {
      if (roleType == 1) {
        return "普通专家";
      } else if (roleType == 2) {
        return "专家小组长";
      } else if (roleType == 3) {
        return "专家大组长";
      }
    },
    getUserGroupName(groupId) {
      this.userGroupData.forEach((item) => {
        if (item.groupId == groupId) {
          return item.groupName;
        }
      });
    },
    // 点击菜单切换显示页面
    showPage(id) {
      if (id != this.defaultId) {
        this.$store.commit("app/setDefaultId", id);
        this.total = 0;
        this.userTableData = [];
        this.userGroupTableData = [];
      }
    },
    // 获取目标树数据
    async findAllTarget() {
      let data = await this.$api.newTargetFindAllByTree();
      this.targetTreeData = data;
    },
    // 搜索用户数据
    searchUser() {
      this.getAllUser();
    },
    // 获取用户数据
    async getAllUser(groupId, searchName) {
      this.userLoading = true;
      let params = {
        groupId: groupId || this.groupId,
        searchName: searchName || this.searchName,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      };
      await this.$api.getAllUser(params).then((res) => {
        this.userLoading = false;
        if (res.list.length > 0) {
          this.total = res.total;
          this.userTableData = res.list;
        } else {
          this.total = 0;
          this.userTableData = [];
        }
      });
    },
    // 获取全部用户组信息
    async getAllUserGroup0() {
      let params = {
        pageSize: 0,
        pageNo: this.pageNo,
      };
      await this.$api.getAllGroup(params).then((res) => {
        this.userGroupData = res;
      });
    },
    // 获取用户组数据
    async getAllUserGroup() {
      this.userGroupLoading = true;
      let params = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      };
      await this.$api.getAllGroup(params).then((res) => {
        this.userGroupLoading = false;
        if (res.list.length > 0) {
          this.total = res.total;
          this.userGroupTableData = res.list;
        } else {
          this.total = 0;
          this.userGroupTableData = [];
        }
      });
    },
    // 用户组table翻页
    handleUserGroupCurrentChange(page) {
      this.pageNo = page;
      this.getAllUserGroup();
    },
    // 用户组数据回显
    async userGroupView(group) {
      console.log(group);
      this.userGroupForm.groupId = group.groupId;
      this.userGroupForm.groupName = group.groupName;
      let targetIds = [];
      targetIds = group.targetTds;
      this.userGroupForm.targetIds = targetIds;
      this.userGroupDialogVisible = true;
      this.$nextTick(() => {
        this.$refs["targetTree"].setCheckedKeys(targetIds);
      });
    },
    // 用户组查看权限
    handleUserGroupView(group) {
      this.userGroupView(group);
      this.inputDisabled = true;
    },
    // 用户组修改
    handleUserGroupEdit(group) {
      this.userGroupView(group);
    },
    // 用户组删除
    handleUserGroupDelete(id) {
      this.$confirm("此操作无法恢复，确定删除此用户组吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteGroup({ groupId: id }).then((res) => {
          if (res.indexOf("200") != -1) {
            this.$message({
              type: "success",
              message: "删除成功",
              showClose: true,
            });

            this.getAllUserGroup();
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      });
    },
    // 目标节点被选中事件
    treeCheck(data, checked) {
      this.userGroupForm.targetIds = checked.checkedKeys;
    },
    // 点击新增用户按钮
    createUser() {
      this.userDialogVisible = true;
    },
    // 点击新增用户组按钮
    createUserGroup() {
      this.userGroupDialogVisible = true;
    },
    // 关闭前清空用户组form表单
    beforeUserGroupDialogClose() {
      this.userGroupForm.groupId = "";
      this.userGroupForm.groupName = "";
      this.userGroupForm.targetIds = [];
      this.$refs.targetTree.setCheckedKeys([]);
      this.inputDisabled = false;
      this.userGroupDialogVisible = false;
    },
    // 取消新增用户组
    cancelUserGroup() {
      this.beforeUserGroupDialogClose();
    },
    // 新增用户组
    submitUserGroup() {
      if (this.userGroupForm.groupName.trim() == "") {
        this.$message({
          type: "warning",
          message: "请输入用户组名",
          showClose: true,
        });
        return;
      }
      if (this.userGroupForm.targetIds.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择用户组权限",
          showClose: true,
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$api.addGroup(this.userGroupForm).then((res) => {
        if (res.indexOf("200") != -1) {
          loading.close();
          this.beforeUserGroupDialogClose();
          this.$confirm("", "操作成功", {
            confirmButtonText: "确定",
            showClose: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showCancelButton: false,
            center: true,
          })
            .then(() => {
              this.getAllUserGroup();
              this.getAllUserGroup0();
            })
            .catch(() => {
              console.log("catch");
            });
        } else {
          this.$notify({
            title: "提示",
            message: res.split(",")[1],
            type: "warning",
          });
        }
      });
    },
    handleUserCurrentChange(page) {
      this.pageNo = page;
      this.getAllUser();
    },
    // 关闭前清空用户form表单
    beforeUserDialogClose() {
      this.userForm.userId = 0;
      this.userForm.loginName = "";
      this.userForm.password = "";
      this.userForm.userRole = "2";
      this.userForm.roleType = "";
      this.userForm.groupId = "";
      this.userDialogVisible = false;
    },
    // 取消新增用户
    cancelUser() {
      this.beforeUserDialogClose();
    },
    // 新增用户
    submitUser() {
      if (this.userForm.loginName == "") {
        this.$message({
          type: "warning",
          message: "请输入用户名",
          showClose: true,
        });
        return;
      }
      if (this.userForm.password == "") {
        this.$message({
          type: "warning",
          message: "请输入登录密码",
          showClose: true,
        });
        return;
      }
      if (this.userForm.userRole == "3" && this.userForm.roleType == "") {
        this.$message({
          type: "warning",
          message: "请选择组内角色",
          showClose: true,
        });
        return;
      }
      if (
        this.userForm.userRole == "3" &&
        (this.userForm.roleType == "1" || this.userForm.roleType == "2") &&
        this.userForm.groupId == ""
      ) {
        this.$message({
          type: "warning",
          message: "请选择用户组",
          showClose: true,
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$api.regist(this.userForm).then((res) => {
        if (res.indexOf("200") != -1) {
          loading.close();
          this.beforeUserDialogClose();
          this.$confirm("", "操作成功", {
            confirmButtonText: "确定",
            showClose: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showCancelButton: false,
            center: true,
          })
            .then(() => {
              this.getAllUser();
            })
            .catch(() => {
              console.log("catch");
            });
        } else {
          this.$notify({
            title: "提示",
            message: res.split(",")[1],
            type: "warning",
          });
        }
      });
    },
    // 细分用户权限
    handleUserAuth(user) {
      this.expertId = user.userId;
      this.loginName = user.loginName;
      this.getGroupTarget(user.groupId, user.userId);
      // this.getUserTarget(user.userId);
      this.userAuthDialogVisible = true;
    },
    // 获取小组权限
    async getGroupTarget(groupId, userId) {
      await this.$api.getGroupTarget(groupId).then((res) => {
        this.authTreeData = res;
        this.getUserTarget(userId, res);
      });
    },
    // 获取用户权限
    async getUserTarget(userId, data) {
      await this.$api.getUserTarget(userId).then((res) => {
        if (res.length > 0) {
          this.userAuth = [];
          this.userAuth = JSON.parse(JSON.stringify(res));
          this.$nextTick(() => {
            this.$refs.authTree.setCheckedKeys(this.userAuth);
          });
        } else {
          this.userAuth = [];
          this.getMyTargetZBNMArr(data);
          console.log(this.userAuth);
          this.$nextTick(() => {
            this.$refs.authTree.setCheckedKeys(this.userAuth);
          });
        }
      });
    },
    async getMyTargetZBNMArr(data) {
      await data.forEach((item) => {
        if (item.belongMe) {
          this.userAuth.push(item.xh);
        }
        if (item.childrenTarget && item.childrenTarget.length > 0) {
          this.getMyTargetZBNMArr(item.childrenTarget);
        }
      });
    },
    authTreeCheck(data, checked) {
      this.userAuth = JSON.parse(JSON.stringify(checked.checkedKeys));
    },
    // 关闭细分用户权限弹窗前调用
    beforeUserAuthDialogClose() {
      this.expertId = "";
      this.loginName = "";
      this.userAuth = [];
      this.$refs.authTree.setCheckedKeys([]);
      this.userAuthDialogVisible = false;
    },
    // 取消细分权限
    cancelUserAuth() {
      this.beforeUserAuthDialogClose();
    },
    // 提交用户权限
    async submitUserAuth() {
      if (this.userAuth.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择用户权限",
          showClose: true,
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$api
        .setUserAuth({
          expertId: this.expertId,
          targetIds: this.userAuth,
        })
        .then((res) => {
          if (res.indexOf("200") != -1) {
            loading.close();
            this.beforeUserAuthDialogClose();
            this.$confirm("", "操作成功", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showCancelButton: false,
              center: true,
            })
              .then(() => {
                console.log("then");
              })
              .catch(() => {
                console.log("catch");
              });
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
    },
    // 编辑用户
    handleUserEdit(user) {
      this.userForm.userId = user.userId;
      this.userForm.loginName = user.loginName;
      this.userForm.password = user.password;
      this.userForm.userRole = user.userRole;
      this.userForm.roleType = user.roleType;
      this.userForm.groupId = user.groupId;
      this.userDialogVisible = true;
    },
    // 删除用户
    handleUserDelete(id) {
      this.$confirm("此操作无法恢复，确定删除此用户组吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteUser({ UserId: id }).then((res) => {
          if (res.indexOf("200") != -1) {
            this.$message({
              type: "success",
              message: "删除成功",
              showClose: true,
            });
            this.getAllUser();
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.user {
  display: flex;
  width: 100%;
  height: 100%;
  .user-left {
    width: 3rem;
    height: calc(100% - 0.2rem);
    box-sizing: border-box;
    margin-top: 0.2rem;
    background: url(~@/assets/common/rectangle3.png) no-repeat;
    background-size: 105% 100%;
    background-position: center;
    .user-left-main {
      @include scrollBar;
      overflow-y: auto;
      height: calc(100vh - 2rem);
      margin-top: 0.2rem;
      padding: 1 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba puHuiTi;
      font-size: 0.15rem;
      font-weight: 400;
      color: #959595;
      .user-left-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        cursor: pointer;
        margin-bottom: 0.08rem;
        height: 0.4rem;
        .slot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .circle {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
            background-color: #959595;
            margin-right: 0.15rem;
            margin-left: 0.17rem;
          }
        }
        .operate {
          width: 1.08rem;
          position: absolute;
          z-index: 122;
          top: 0.2rem;
          right: 0.25rem;
          padding: 0.16rem;
          box-shadow: 0rem 0rem 0.1rem #000;
          background: rgba(98, 98, 98, 0.79);
          border-radius: 0.04rem;
          .create {
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
      .user-left-active {
        color: #ffffff;
        .slot {
          .circle {
            background-color: #ffffff;
          }
        }
      }
    }
  }
  .user-right {
    width: calc(100% - 3rem);
    height: calc(100% - 0.2rem);
    box-sizing: border-box;
    margin-top: 0.2rem;
    margin-left: 0.15rem;
    // background: url(~@/assets/common/rectangle3.png) no-repeat;
    background-size: 105% 100%;
    background-position: center;
    .user-button-primary {
      margin: 0 0 0 0.5rem;
    }
    .user-right-table {
      @include scrollBar;
      width: calc(100% - 1rem);
      margin: 0.3rem 0.5rem 0;
    }
  }
}
::v-deep .image-pagination {
  position: absolute;
  bottom: 0rem;
  right: 2.87rem;
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1890ff;
    color: #ffffff;
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #034475;
  }
  .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
    background: #034475;
    border: 0px;
  }
  .el-pagination--small span:not([class*="suffix"]),
  .el-pagination--small button {
    color: #034475;
    margin-left: 20px;
  }
  .el-pagination .btn-prev .el-icon,
  .el-pagination .btn-next .el-icon {
    color: #ccc;
  }
  .el-pagination.is-background .el-pagination__total,
  .el-pagination.is-background .el-pagination__jump {
    color: #1890ff;
    font-weight: 700;
  }
  .el-pagination.is-background .el-pagination__jump .el-input__inner {
    color: #fff;
  }

  .el-pagination.is-background .btn-prev:hover .el-icon,
  .el-pagination.is-background .btn-next:hover .el-icon {
    color: #fff;
  }
  .el-pagination.is-background .el-pager .number:hover,
  .el-pagination.is-background .btn-prev:hover,
  .el-pagination.is-background .btn-next:hover {
    background-color: #1890ff;
    color: #ffffff;
  }
}
::v-deep .el-dialog {
  color: #ffffff;
  font-size: 0.16rem;
  width: 7.2rem !important;
  background: #474747;
  box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
  border-radius: 0.05rem;
  z-index: 10000;
  .el-dialog__header {
    padding: 0.16rem;
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    background: #0f2d43 !important;
    .el-input__inner {
      color: white;
      margin-left: 0.12rem;
      padding-left: 0.12rem;
      cursor: pointer;
      width: 5.2rem;
      height: 0.38rem;
      background: #0355a4 !important;
      border-radius: 0.05rem;
      border: none;
    }
    .el-radio-group {
      margin-left: 0.12rem;
      padding-left: 0.12rem;
    }
  }
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-radio {
  color: #fff;
}
::v-deep .el-textarea__inner {
  color: white;
  cursor: pointer;
  background: #0355a4 !important;
  border: none;
}
.footer {
  margin-top: 0.3rem;
  color: #ffffff;
  margin-right: 0.3rem;
  justify-content: flex-end;
  .cancel {
    text-align: center;
    width: 1.2rem;
    height: 0.38rem;
    line-height: 0.38rem;
    background: #62656c;
    border-radius: 0.05rem;
  }
  .confirm {
    margin-left: 0.2rem;
    text-align: center;
    width: 1.2rem;
    height: 0.38rem;
    line-height: 0.38rem;
    background: #1890ff;
    border-radius: 0.05rem;
  }
}

.el-tree {
  width: calc(100% - 0.6rem);
  display: inline-block;
  margin-left: 0.12rem;
  padding-left: 0.12rem;
  background: #0355a4 !important;
  color: #fff;
  border-radius: 0.05rem;
}
::v-deep .el-tree-node__content:hover,
.el-tree-node__content:focus,
.el-tree-node__content:active,
.el-tree-node__content:target {
  background-color: #143853;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #143853 !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #143853;
  border-color: #143853;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #143853;
  border-color: #143853;
}
.target-tree {
  @include scrollBar;
  max-height: 3rem;
  height: 3rem;
  overflow-y: scroll;
}
::v-deep .el-select-dropdown.el-popper {
  margin-left: 0.12rem !important;
}
::v-deep .el-table,
::v-deep .el-table__body,
::v-deep .el-table__row {
  background-color: rgba(0, 0, 0, 0.1);
  .cell {
    color: #fff;
  }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0.1);
}
::v-deep .el-table__row td,
::v-deep .has-gutter tr th {
  border-bottom: none !important;
}
.search-con {
  ::v-deep .el-input__inner {
    background: #034576;
    color: #ffffff;
    font-size: 0.14rem;
    border: 1px solid #034576;
    padding: 0 6px;
  }
}
</style>
